<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2023-02-03 16:01:39
 * @LastEditors: 
 * @LastEditTime: 2023-02-03 16:03:54
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      margin: 100px;
    }

    li {
      width: 600px;
      height: 40px;
      border: 1px solid #333;
      margin-bottom: 15px;
      list-style: none;
      position: relative;

      background-color: #fff;
    }

    li > p {
      width: 500px;
      height: 320px;
      background-color: skyblue;
      position: absolute;
      left: 600px;
      top: 100px;
      display: none;

      pointer-events: none;

      z-index: 999;
    }
  </style>
</head>
<body>

  <ul>
    <li>我是标题1
      <p>我是详细内容1</p>
    </li>
    <li>我是标题2
      <p style="background: orange">我是详细内容2</p>
    </li>
    <li>我是标题3
      <p style="background: pink">我是详细内容3</p>
    </li>
  </ul>

  <script>

    // 什么时候会发生效果  
    // 鼠标移入li的时候
    // 鼠标移出li的时候
    // 鼠标在li上移动的时候


    // 发生什么效果
    // 鼠标移入li的时候，显示p
    // li 的left 和 top   给到 p 的left 和 top

    // 获取元素 
    var lis = document.querySelectorAll('ul > li');

    lis.forEach(function(item){
        item.addEventListener('mouseover',one);
        item.addEventListener('mouseout',two);
        item.addEventListener('mousemove',three);


    })

    // 鼠标移入做的事情 
    function one(){
        this.firstElementChild.style.display = 'block';
    }

    // 鼠标移出做的事情
    function two(){
        this.firstElementChild.style.display = 'none';
    }

    // 鼠标在li上移动的时候做的事情

    function three(e){
        var x = e.offsetX + 20;  
        // 20 是为了让p标签和光标保持一定的距离
        var y = e.offsetY + 20;

        this.firstElementChild.style.left = x + 'px';
        this.firstElementChild.style.top = y + 'px';
    }


    // 每个li 上从左往右滑动 没有问题  
    // 但是从右往左滑动 会有一个小问题 抖了一下  
    // p标签在抖  


    // p标签是 li的子标签  li的子标签是从左往右滑动的
    // 当你在p标签上移动的时候  此时也会触发父亲 li 的mousemove 事件 
    // 但是此时的e.offsetX 是相对于p标签的  不是相对于li标签的
    // offset 是准确触发元素上的 左上角的坐标点   
    // 也就是说你移动  到p元素身上  此时准确触发的元素是p 
    // 但是因为触发了li的mousemove事件  准确元素 不是p了
    // 所以会出现抖动的问题 

    // 解决办法
    //  让p标签不要触发li的mousemove事件 让p标签和光标保持一定的距离 
    // 这样就不会触发li的mousemove事件了

    // 方案2 : 让p标签 保持穿透效果




  </script>

</body>
</html>